<template>
  <view style="color:#000;">
    <view class="bg_weixin">
      <view class="bg" style="width: auto;display: inline-block;" id="bg">
<!--        <image src="https://images.taboola.com/taboola/image/fetch/f_jpg%2Cq_auto%2Ch_342%2Cw_580%2Cc_fill%2Cg_faces:auto%2Ce_sharpen/http%3A//cdn.taboola.com/libtrc/static/thumbnails/c44e65e95160ad10815d0f193634db35.jpg" mode=""></image>-->
        <video id="jk" src="http://vfx.mtime.cn/Video/2019/03/21/mp4/190321153853126488.mp4" autoplay controls></video>
        123
      </view>
      <view class="footer">
        <button @click="toImage()" type="default">保存图片</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "ceshi",
  data() {
    return {
      codes: "",
      img: '',
      test: '',
      widthW: '',
      heightH: ''
    }
  },
  onReady() {
    const that = this;
    //防止切图成白屏
    setTimeout(function () {
      that.toImage();
    }, 1000);
  },
  created() {
    console.log('123')
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#bg').boundingClientRect(data => {
      console.log(data)
      this.widthW = data.width;
      this.heightH = data.height;
      /*
      * height,
      * width*/
    }).exec();
  },
  methods: {
    qrcode() {
      let url = 'http://app-dbc.itipool.co/?code=' + this.codes
      this.img = QR.createQrCodeImg(url, {
        size: parseInt(280) //二维码大小
      })
    },
    toImage() {
      const that = this;
      /* 获取屏幕信息 */
      let ws = this.$mp.page.$getAppWebview();
      console.log(ws, '123')
      let bitmap = new plus.nativeObj.Bitmap('test');
      // 将webview内容绘制到Bitmap对象中
      ws.draw(
          bitmap,
          function (e) {
            /* 获取base64 */
            that.test = bitmap.toBase64Data();
            /* 加载base64编码 */
            bitmap.loadBase64Data(
                bitmap.toBase64Data(),
                function () {
                  console.log('加载Base64图片数据成功');
                  /* 保存图片 */
                  bitmap.save(
                      '_doc/share.jpg',
                      {},
                      async (i) => {
                        console.log('保存图片成功：' + JSON.stringify(i));
                        uni.saveImageToPhotosAlbum({
                          filePath: i.target,
                          success: function () {
                            /* 清除 */
                            bitmap.clear();
                            that.$refs.uToast.show({
                              title: '保存成功,请到相册中查看',
                              type: 'success',
                            })
                          },
                          fail(e) {
                            that.$refs.uToast.show({
                              title: '保存失败' + e,
                              type: 'error',
                            })
                          }
                        });
                      },
                      function (e) {
                        console.log('保存图片失败：' + JSON.stringify(e));
                      }
                  );
                },
                function () {
                  console.log('加载Base64图片数据失败：' + JSON.stringify(e));
                }
            );
          },
          function (e) {
            console.log('截屏绘制图片失败：' + JSON.stringify(e));
          },
          {
            check: true, // 设置为检测白屏

            clip: {top: '0px', left: '0px', height: this.heightH, width: this.widthW} // 设置截屏区域
          }
      );
    },
  }
}
</script>

<style scoped>

</style>
